<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('基金架构图') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('基金名称')">
        <fund-select v-model="queryParams.id" :scope="true" @change="changeFund()" />
      </el-form-item>
    </el-form>

    <div v-loading="loading" style="width: 100%;height: calc(100vh - 240px);">
      <div v-show="msgShow" class="fund-jgt-div">
        <span>{{ $t('请选择基金后查看架构图') }}</span>
      </div>

      <div v-show="!msgShow" class="chartDom" style="width: 100%;height: 100%;">
        <a :title="$t('保存为图片')" @click="download()"><svg-icon icon-class="chartDown" /></a>
        <div id="mountNode" style="width: 100%;height: 100%;" />
      </div>
    </div>

  </div>
</template>

<script>
import G6 from '@antv/g6'
// 行业组件
import { getStructureChart } from '@/api/fund/fundBase'
import FundSelect from '@/components/Select/fundSelect'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  components: {
    FundSelect
  },
  data() {
      return {
          // 遮罩层
          loading: false,
          // 查询参数
          queryParams: {
              id: ''
          },
          // 表单参数
          form: {},
          // 选择基金组件类型
          subjectType: 'fund',
          // 选择基金后带出的charts数据
          data: {},
          // antV G6 容器对象
          graph: {},
          // 判断是否展示遮罩层，提示选择基金
          msgShow: false
      }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    download() {
      this.graph.fitView(0)
      this.$nextTick(() => {
        this.graph.downloadFullImage('基金架构图', 'image/png', {
          backgroundColor: '#fff',
          padding: [15, 15, 15, 15]
        })
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = undefined
      this.resetForm('queryForm')
      this.queryHandle()
    },
    changeFund() {
      this.loading = true
      /** 获取架构图数据 */
      getStructureChart(this.queryParams).then(response => {
        this.data = response.datas.resultMap
        this.getI18nText(this.data)
        if (this.data.name !== null && this.data.name !== undefined) {
          this.graph.changeData(this.data)
          if (this.data.children !== null && this.data.children !== undefined && this.data.children.length > 0) {
            this.graph.fitView(0)
          } else {
            this.graph.fitView(0)
          }
          this.loading = false
        }
        this.msgShow = false
      })
    },
    // 字段国际化
    getI18nText(data) {
      if (data !== null && data !== undefined) {
        const unit = this.$t('金额单位')
        if (data.remark === 'fund') {
          data.desc = this.$t('目标规模') + unit + ': ' + moneyFormat(data.desc, 'w')
        } else if (data.remark === 'czr') {
          data.desc = this.$t('认缴规模') + unit + ': ' + moneyFormat(data.desc, 'w')
        } else if (data.remark === 'investment') {
          data.desc = this.$t('投资金额') + unit + ': ' + moneyFormat(data.desc, 'w')
        } else if (data.remark === 'holder') {
          data.desc = this.$t('股权比例') + ': ' + moneyFormat(data.desc) + '%'
        } else if (data.remark === 'holderTotal') {
          data.desc = this.$t('共计{num}个', { num: data.desc })
          data.name = this.$t('股东信息')
        } else if (data.remark === 'childCompanyTotal') {
          data.desc = this.$t('共计{num}个', { num: data.desc })
          data.name = this.$t('对外投资')
        }
        // 遍历子元素
        if (data.children !== null && data.children !== undefined && data.children.length > 0) {
          data.children.forEach((item) => {
            this.getI18nText(item)
          })
        }
      }
    },
    initChart() {
      this.msgShow = true
      // 设置节点
      G6.registerNode('icon-node', {
        draw(cfg, group) {
          const styles = this.getShapeStyle(cfg)
          const { labelCfg = {}} = cfg
          const keyShape = group.addShape('rect', {
            attrs: {
              ...styles,
              x: 0,
              y: 0
            }
          })
          if (cfg.name) {
            group.addShape('text', {
              attrs: {
                ...labelCfg.style,
                text: cfg.name,
                x: 15,
                y: 22
              }
            })
          }
          group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: 15,
              y: 32,
              fontSize: 10,
              lineHeight: 40,
              text: cfg.desc,
              fill: 'rgba(0,0,0, 1)'
            },
            name: `description`
          })
          return keyShape
        }
      }, 'rect')
      // 设置默认的节点样式
      const defaultNodeStyle = {
        fill: '#91d5ff',
        stroke: '#40a9ff',
        radius: 10
      }
      // 设置默认展示的label样式
      const defaultLabelCfg = {
        style: {
          fill: '#000',
          fontSize: 12
        }
      }
      const container = document.getElementById('mountNode')
      const width = container.scrollWidth
      const height = container.scrollHeight
      this.graph = new G6.TreeGraph({
        container: 'mountNode',
        width: width,
        height: height,
        fitView: true,
        pixelRatio: 2,
        maxZoom: 1.5,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model').data
                data.collapsed = collapsed
                return true
              }
            },
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          type: 'icon-node',
          size: [200, 40],
          style: defaultNodeStyle,
          labelCfg: defaultLabelCfg
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: {
          type: 'compactBox',
          direction: 'H',
          getHeight: function getHeight() {
            return 40
          },
          getWidth: function getWidth() {
            return 66
          },
          getVGap: function getVGap() {
            return 10
          },
          getHGap: function getHGap() {
            return 100
          },
          getSide: d => {
            if (d.data.remark === 'czr') {
              return 'left'
            }
            return 'right'
          }
        }
      })

      this.graph.node(function(node) {
        return {
          size: [200, 50],
          style: {
            fill: node.remark === 'fund' ? '#40a9ff' : '#fff',
            stroke: '#096dd9'
          },
          label: node.name
        }
      })

      // this.graph.read(this.data);
    }
  }
}
</script>

